<template>
  <div class="container clearfix">
    <header class="header">
      <el-breadcrumb class="breadcrumb" separator=">">
        <span class="pull-left">当前位置：</span>
        <el-breadcrumb-item>
          <nuxt-link class="text-primay-hover" :to="{ path: '/' }">首页</nuxt-link>
        </el-breadcrumb-item>

        <el-breadcrumb-item>
          <nuxt-link :to="{path: '/news'}" >行业资讯</nuxt-link>
        </el-breadcrumb-item>

        <el-breadcrumb-item class="text-primay">资讯详情</el-breadcrumb-item>
      </el-breadcrumb>
    </header>

    <section class="main">
      <article class="article">
        <header>
          <h1 class="text-overflow title" :title="detail.name">{{detail.name}}</h1>
          <div class="articel-bar clearfix">
            <span class="source" :title="detail.source">来源: {{detail.source | cutStr(20)}}</span>
            <time class="time">时间：{{detail.updateTime}}</time>

            <Share class="share" :data-share="{
                      url: `${url}`,
                      title: `${detail.name}`,
                      image: `${address.IMG_ADDRESS + detail.picture}`,
                      description:`${detail.introduction}`
                      }"></Share>
          </div>
        </header>

        <section class="content" v-html="detail.content">
        </section>

        <footer class="footer">
          <nuxt-link v-if="otherArticles.beforeID" :to="{path:`/news/${otherArticles.beforeID}`}"
                     class="prev-article text-overflow"><span>上一篇：{{otherArticles.beforeContent}}</span>
          </nuxt-link>

          <span v-else class="prev-article no-article text-overflow"><span>上一篇：已是最新一篇资讯</span>
          </span>

          <nuxt-link :to="{path:`/news/${otherArticles.nextID}`}"
                     v-if="otherArticles.nextID"
                     class="next-article text-overflow"><span>下一篇：{{otherArticles.nextContent}}</span></nuxt-link>

          <span v-else class="next-article no-article text-overflow"><span>下一篇：已是最后一篇资讯</span>
          </span>
        </footer>
      </article>

      <div class="disclaimer">
        <header>免责申明</header>
        <ol>
          <li>1、聚贸网发布此信息目的在于传播更多信息，与本网站立场无关。</li>
          <li>2、聚贸网不保证该信息（包括但不限于文字、数据及图标）全部或者部分内容的准确性、真实性、完整性、有效性、及时性、原创性等。</li>
          <li>3、相关信息并未经过本网站证实，不对您构成任何投资建议，据此操作，风险自担。</li>
          <li>4、如有侵权请直接与作者联系或书面发函至本公司转达、处理。</li>
        </ol>
      </div>
    </section>

    <aside class="recomd-box">
      <SideBar :data="recomds" :adv="adv"></SideBar>
    </aside>

  </div>
</template>

<script>
  import axios from '~/plugins/axios'
  import Share from '~/components/Share.vue'
  import SideBar from '~/components/News/SideBar'
  import address from '~/config'

  export default {
    data () {
      return {
        address,
        url: ''
      }
    },
    components: {
      Share,
      SideBar
    },
    head () {
      let seo = {
        title: `${ this.detail.name } - 聚贸矿产`,
        desc: `${ this.detail.name } 聚贸矿产致力于为您提供详细全面的行业资讯，价格走势，矿产行情动态。专业矿产原材料电商平台，聚贸矿产。`
      }
      return {
        title: seo.title,
        meta: [{
          hid: 'description',
          name: 'description',
          content: seo.desc
        }]
      }
    },
    mounted () {
      this.url = location.href
    },
    async asyncData ({params, query}) {
      const id = params.id
      const urls = [
        // 资讯详情
        {
          // 文章详情
          articlesUrl: `/information/getArtcle/${id}`,

          // 上一页、下一页
          beforeNextUrl: '/information/findBeforeNext',

          // 推荐
          recomUrl: '/information/listArtcle',

          // 广告
          advUrl: '/information/volistDetail'
        }]

      const url = urls[0]
      const [detail = {}, {data: otherArticles = {}}, {data: recomds = {}}, {data: adv = []}] = await Promise.all([
        axios.get(url.articlesUrl).then(data => data.data.data),
        axios.get(url.beforeNextUrl, {params: {id: id}}).then(data => data.data),
        axios.get(url.recomUrl).then(data => data.data),
        axios.get(url.advUrl).then(data => data.data)
      ])
      return {
        otherArticles,
        detail,
        recomds,
        adv
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  @import "../../element-variables";

  .header {
    padding: 20px 0;
  }

  .breadcrumb {
    color: #6e6e6e;
    padding-left: 10px;
    border-left: 2px solid $--color-primary;
  }

  .main {
    width: 830px;
    border: 1px solid #dedede;
    float: left;

    .article {
      background-color: #fff;
      padding: 32px 45px;
      min-height: 910px;
      position: relative;

      header {
        border-bottom: 1px solid #dedede;
        padding-bottom: 12px;
      }
    }

    .content {
      padding: 20px 0;
      min-height: 700px;
      color: #6e6e6e;
      word-break: break-all;

      p {
        line-height: 24px;
        margin-bottom: 10px;
      }
    }

    .title {
      font-weight: normal;
      font-size: 24px;
      color: #3e3e3e;
      text-align: center;
      padding-bottom: 5px;
    }

    .footer {
      border-top: 1px solid #dedede;
      padding: 36px 0 0;
      overflow: hidden;
    }

    .prev-article, .next-article {
      width: 50%;
      float: left;
      min-height: 1px;
      color: #6e6e6e;
    }
    a.prev-article:hover, a.next-article:hover {
      color: $--color-primary;
    }

    .prev-article {
      padding-right: 8px;
    }
    .next-article {
      padding-left: 8px;
      text-align: right;
    }
  }

  .articel-bar {
    text-align: center;
    color: #9e9e9e;
    padding: 5px 0;
    position: relative;

    .source {
      padding-right: 15px;
    }
  }

  .share {
    position: absolute;
    right: 0;
    top: 0;
  }

  .disclaimer {
    background-color: #fff;
    padding: 25px 45px;
    margin-top: 20px;
    color: #9e9e9e;

    header {
      line-height: 24px;
      font-size: 16px;
      color: #3e3e3e;
      text-align: center;
      padding-bottom: 20px;
    }

    li {
      line-height: 24px;
    }
  }

</style>
<style lang="scss">
  .article {
    .content {
      img {
        max-width: 100%;
      }
    }
  }
</style>
